<template>
  <el-drawer
    v-model="visibleDrawer"
    :destroy-on-close="true"
    :with-header="false"
    size="50%"
  >
    <el-form :model="formModel" ref="formRef">
      <el-form-item label="题目标题:">
        <el-input
          style="width: 387px !important"
          v-model="formQuestion.title"
          placeholder="请输入标题"
        ></el-input>
      </el-form-item>
      <el-form-item label="题目难度:">
        <QuestionSelector
          style="width: 387px !important"
          v-model="formQuestion.difficulty"
          width="100%"
          placeholder="请选择题目难度"
        >
        </QuestionSelector>
      </el-form-item>
      <el-form-item label="时间限制（单位毫秒）:">
        <el-input
          style="width: 300px !important"
          v-model="formQuestion.timeLimit"
          placeholder="请输入时间限制"
        ></el-input>
      </el-form-item>
      <el-form-item label="空间限制（单位字节）:">
        <el-input
          style="width: 300px !important"
          v-model="formQuestion.spaceLimit"
          placeholder="请输入空间限制"
        ></el-input>
      </el-form-item>
      <el-form-item label="题目内容:">
        <div class="editor">
          <quill-editor
            placeholder="请输入题目内容"
            v-model:content="formQuestion.content"
            content-type="html"
          ></quill-editor>
        </div>
      </el-form-item>
      <el-form-item label="题目用例:">
        <el-input
          style="width: 387px !important"
          v-model="formQuestion.questionCase"
          placeholder="请输入题目用例"
        ></el-input>
      </el-form-item>
      <el-form-item label="默认代码块:">
        <code-editor
          @update:value="handleEditorContent"
          ref="defaultCodeRef"
        ></code-editor>
      </el-form-item>
      <el-form-item label="main函数:">
        <code-editor
          @update:value="handleEditorMainFunc"
          ref="mainFucRef"
        ></code-editor>
      </el-form-item>
      <el-form-item>
        <el-button
          class="question-button"
          type="primary"
          plain
          @click="onSubmit()"
          >发布</el-button
        >
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script setup>
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import CodeEditor from "./CodeEditor.vue";
import QuestionSelector from "./QuestionSelector.vue";
import { ref, reactive } from "vue";
import {
  addQuestionService,
  getQuestionDetailService,
  editQuestionService,
} from "@/apis/question";

const visibleDrawer = ref(false);
const formQuestion = reactive({
  questionId: "",
  title: "",
  difficulty: "",
  content: "",
  questionCase: "",
  timeLimit: "",
  spaceLimit: "",
  defaultCode: "",
  mainFuc: "",
});

const defaultCodeRef = ref();
const mainFucRef = ref();

async function open(questionId) {
  visibleDrawer.value = true;
  for (const key in formQuestion) {
    if (formQuestion.hasOwnProperty(key)) {
      formQuestion[key] = "";
    }
  }
  if (questionId) {
    const questionDetail = await getQuestionDetailService(questionId);
    Object.assign(formQuestion, questionDetail.data);
    defaultCodeRef.value.setAceCode(formQuestion.defaultCode);
    mainFucRef.value.setAceCode(formQuestion.mainFuc);
  }
}

defineExpose({
  open,
});

function validate() {
  let msg = "";
  if (!formQuestion.title) {
    msg = "请添加题目标题";
  } else if (formQuestion.difficulty == "") {
    msg = "请选择题目难度";
  } else if (!formQuestion.timeLimit) {
    msg = "请输入时间限制";
  } else if (!formQuestion.spaceLimit) {
    msg = "请输入空间限制";
  } else if (!formQuestion.content) {
    msg = "请输入题目内容信息";
  } else if (!formQuestion.questionCase) {
    msg = "请输入题目用例名称";
  } else if (!formQuestion.defaultCode) {
    msg = "请输入默认代码";
  } else if (!formQuestion.mainFuc) {
    msg = "请输入main函数";
  } else {
    msg = "";
  }
  return msg;
}
const emit = defineEmits(["success"]);
async function onSubmit() {
  const errorMessage = validate();
  if (errorMessage) {
    ElMessage.error(errorMessage);
    return false;
  }
  const fd = new FormData();
  for (let key in formQuestion) {
    fd.append(key, formQuestion[key]);
  }
  console.log(formQuestion);
  if (formQuestion.questionId) {
    //编辑题目请求
    await editQuestionService(fd);
    ElMessage.success("编辑成功");
    emit("success", "edit");
  } else {
    await addQuestionService(fd);
    ElMessage.success("添加成功");
    emit("success", "add");
  }
  visibleDrawer.value = false;
}

function handleEditorContent(content) {
  formQuestion.defaultCode = content;
}

function handleEditorMainFunc(content) {
  formQuestion.mainFuc = content;
}
</script>

<style lang="scss">
.question-button {
  width: 200px;
}
</style>
